import React from 'react';
import {Layout, Menu} from 'antd';
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import MenuContent from './menuContent';
import {loadMenus} from '../../redux/menu/menu.redux.js';
import {getItem, setItem} from '../../utils/store';
const  imgPath ='https://app-cdn.starcharge.com/';

@withRouter
@connect(state => state.menu, {loadMenus})
class SysMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMenu: '',
            openKeys: [],
            flag:true
        };
        this.appTitle = {
            height: '32px',
            lineHeight: '32px',
            float: 'left',
            color: '#1890ff',
            marginLeft: '10px'
        };
        this.siderLogo = {
            margin: '25px 0px',
            textAlign: 'center'
        };
        this.siderStyle = {
            overflowY: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
        };
        this.logoImg = {
            width: '100%'
        };
        this.desc = {
            color: 'white',
            textAlign: 'center'
        }
        this.handleClick = this.handleClick.bind(this);
    }

    // 页面初始化完成后加载菜单
    componentDidMount() {
        const userInfo = JSON.parse(getItem("token"));
        if (userInfo) {
            this.props.loadMenus({userId: userInfo.id});
            // this.props.loadMenus({userId: userInfo.id, defaultUrl: this.props.location.pathname});
        }
    }

    // 点击菜单刷新右侧页面
    handleClick(e) {
        // this.state.currentMenu 判断会导致bug
        if (this.props.location.pathname !== e.key) {
            this.setState({
                currentMenu: e.key
            });
            setItem('lastMenu', JSON.stringify({pathname: e.key, state: {name: e.item.props.children.props.name}}));
            this.props.history.push({pathname: e.key, state: {name: e.item.props.children.props.name}});
        }
    }

    //刷新页面展开默认结点
    componentWillReceiveProps(nextProps) {
        if (this.props.defaultOpenKeys !== nextProps.defaultOpenKeys) {
            this.onOpenChange(nextProps.defaultOpenKeys);
        }
        if (nextProps.menus.length > 0&&this.state.flag) {
            if(process.env.NODE_ENV === "production"){
                this.props.history.push(nextProps.menus[0].children[0].url);
                this.setState({
                    flag:false,
                })
            }
        }
    }


    onOpenChange = (openKeys) => {

        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        this.setState({
            openKeys: latestOpenKey ? [latestOpenKey] : [],
        });
    }

    render() {
        return (
            <Layout.Sider style={this.siderStyle} width={this.props.width}
                          trigger={null}
                          collapsedWidth="0"
                          breakpoint="lg"
                          collapsible="true"
                          collapsed={this.props.collapsed}>
                <div style={this.siderLogo}>
                  {JSON.parse(getItem('token')) && JSON.parse(getItem('token')).logo ? <img alt="logo" style={{width: 177}} src={`${imgPath}${JSON.parse(getItem('token')).logo}`}/> :
                    <img alt="logo" style={{width: 177}} src={require('../../img/png/headerLogo.svg')}/>}
                    {/*<img alt="logo"*/}
                    {/*src={`https://app-cdn.starcharge.com/${JSON.parse(getItem("token")).logo}`}/>*/}
                    {/*<h3 style={this.appTitle}>{SYS_NAME}</h3>*/}
                </div>
                <Menu
                    selectedKeys={[this.props.location.pathname]}
                    onOpenChange={this.onOpenChange}
                    openKeys={this.state.openKeys}
                    theme="dark" mode="inline" onClick={this.handleClick}
                    style={{paddingTop: 50}}
                >
                    {/*这里只渲染三级及以下菜单，超过三级需重新定制*/
                        this.props.menus.map(v => (
                            v.children && v.children.length > 0 ?
                                <Menu.SubMenu key={v.url || v.id} title={<MenuContent {...v}  />}
                                              children={
                                                  v.children.map(val => (
                                                      val.children && val.children.length > 0 ?
                                                          <Menu.SubMenu key={val.url || val.id}
                                                                        title={<MenuContent {...val} />}
                                                                        children={
                                                                            val.children.map(value => (
                                                                                <Menu.Item key={value.url || value.id}>
                                                                                    <MenuContent {...value} />
                                                                                </Menu.Item>
                                                                            ))
                                                                        }
                                                          />
                                                          :
                                                          <Menu.Item key={val.url || val.id}>
                                                              <MenuContent {...val} />
                                                          </Menu.Item>
                                                  ))
                                              }/>
                                :
                                <Menu.Item key={v.url || v.id}>
                                    <MenuContent {...v} />
                                </Menu.Item>
                        ))
                    }
                </Menu>
            </Layout.Sider>
        )
    }
}

export default SysMenu;